<template>
	<view class="pages">
		<view class="uniBtn">
			<view>头像</view>
			<image :src="headimg" mode=""></image>
		</view>
		<view class="uniBtn">
			<view>昵称</view>
			<text>{{name}}</text>
		</view>
		<view class="uniBtn">
			<view>手机号</view>
			<text v-if="phone">{{phone}}</text>
			<!-- 必须要公司注册，且微信认证过的小程序，才能获取到手机号的接口权限， -->
			<view v-else>
				<u-button style="padding: 0;margin: 0;border: none;" type="primary" :plain="true" :hairline="true" text="绑定手机号" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button>
			</view>
			<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			headimg: '',
			name: '',
			phone: ''
		};
	},
	onLoad() {
		this.getmsg()
	},
	methods: {
		async getmsg(){
			let res = await this.$api.getinfo();
			if(res.code == 1){
				// console.log(res)
				this.headimg = res.data.avatar;
				this.name = res.data.nickname;
				this.phone = res.data.mobile;
			}
		},
		async getPhoneNumber(e) {
			// console.log(e.detail.code); // 动态令牌
			let res = await this.$api.getMobileByMnp({code:e.detail.code});
			if(res.code == 1){
				uni.showToast({
					title:'绑定成功！'
				})
				this.getmsg()
			}
		}
	}
};
</script>

<style scoped lang="scss">
.pages {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}

.uniBtn {
	margin: 0 20rpx;
	padding: 38rpx 0;
	border-bottom: 1px solid #e3e3e3;

	view {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}
	image {
		width: 67rpx;
		height: 67rpx;
		border-radius: 50%;
	}
	text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #969696;
	}
}
</style>
